<template>
  <div class="suspendNav">
    <div class="suspendNavItem relative"
         :class="{drawer:showType(navItem.n)=='dra',popUpBox:showType(navItem.n)=='pop',custom:navItem.n=='0',backTop:navItem.n=='5',appEwm:navItem.n=='2',quickTopUp:navItem.n=='1',customLine:navItem.n=='3',officeQQ:navItem.n=='4'}"
         v-for="navItem in suspendNavData" @click="navItemEvent(navItem.n)">
      <div class="suspendNavName relative">
        <div class="navNameBox absmiddle">
          <p>{{navItem.name}}</p>
          <p>{{navItem.en}}</p>
        </div>
      </div>
      <div class="ewmBox">
      
      </div>
    </div>
    <!--<div class="suspendNavItem" :class="{drawer:true,backTop:true}" @click="backTopEvent"></div>-->
  </div>
</template>

<script>
  import './main.scss';
  
  export default {
    data() {
      return {
        suspendNavData: [
          {name: "联系客服", en: "Customer", n: 0},
          {name: "快速充值", en: "Quick top-up", n: 1},
          {name: "APP下载", en: "Download", n: 2},
          {name: "客服热线", en: "400-8222-366", n: 3},
          {name: "官方QQ", en: "123456789", n: 4},
          {name: "返回顶部", en: "Back Top", n: 5},
        ]
      }
    },
    mounted() {
      this.init();
    },
    activated() {
    },
    deactivated() {
    },
    methods: {
      init() {
        let that = this;
        $(".suspendNavItem").hover(function () {
          if ($(this).hasClass('drawer')) {
            $(this).addClass("on");
            $(this).stop().animate({marginLeft: '-103px'}, 'normal', 'linear');
          }
          if ($(this).hasClass('popUpBox')) {
            $(this).addClass("on");
            $(this).find(".ewmBox").show();
            $(this).find(".ewmBox").animate({top: '50%',opacity:'1'}, 'normal', 'swing');
          }
        }, function () {
          if ($(this).hasClass('drawer')) {
            $(this).stop().animate({marginLeft: '0px'}, 'normal', 'linear', () => {
              $(this).removeClass("on");
            });
          }
          if ($(this).hasClass('popUpBox')) {
            $(this).removeClass("on");
            $(this).find(".ewmBox").animate({top: '0%',opacity:'0'}, 'normal', 'swing',() => {
              $(this).find(".ewmBox").hide();
            });
            console.log("ss", $(this).find(".ewmBox"));
          }
        });
      },
      showType(n) {
        if (n == 0 || n == 1 || n == 4 || n == 3 || n == 5) {
          return 'dra';
        } else if (n == 2) {
          return 'pop';
        } else {
          return '';
        }
      },
      navItemEvent(n) {
        if (n == 0) {
          window.open(this._Api.customerLink);
        }
        if (n == 1) {
          if(!this._Util.whetherLogin()) {
            this.$router.push({name: 'login'});
            return;
          }else{
            this.$router.push({name:"topUp",query:{id:4}});
          }
        }
        if (n == 5) {
          this.backTopEvent();
        }
      },
      backTopEvent() {
        $("html,body").animate({scrollTop: 0}, 300);
        $(".personalOfContent").animate({scrollTop: 0}, 300);
        $(".baccarat").animate({scrollTop: 0}, 300);
        $(".newColorCon").animate({scrollTop: 0}, 300);
        $(".colorOfContent").animate({scrollTop: 0}, 300);
        $(".activityList").animate({scrollTop: 0}, 300);
      },
    },
    components: {},
    watch: {}
  }
</script>

<style lang="css" rel="styleheet/css" scoped>

</style>